<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">  
		<view class="body">
			<template v-if="type=='add'||type=='edit'">
				<u--form :model="form" ref="uForm" class="form-wrap">
					<u-form-item label="收货人" labelWidth="160" prop="user_name" borderBottom="true" class="u-form-item">
						<u-input v-model="form.user_name" placeholder="输入收货人" border="none" />
					</u-form-item> 
					<u-form-item label="手机" labelWidth="160" prop="phone" borderBottom="true" class="u-form-item">
						<u-input type="number" v-model="form.phone" placeholder="输入收货人手机" border="none" />
					</u-form-item> 					
					<u-form-item label="详细地址" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
						<u--textarea v-model="form.address" placeholder="请输入详细地址" count ></u--textarea>
					</u-form-item> 
					<u-form-item label="设为默认" labelWidth="160" prop="number" borderBottom="true" class="u-form-item"> 
						<u-switch v-model="form.isdefault" size="28" activeColor="#1cab1b"></u-switch>
					</u-form-item> 
				</u--form>
			</template>
			
			<template v-if="type=='list'">
				<view class="h45">
					<view class="fix-wrap"> 
						<view class="search-area">
							<view class="search-form">
								<view class="icon iconfont f-s44">&#xe622;</view>
								<input type="text" confirm-type="search" v-model="form.keyword" class="sc-inp" @confirm="search" >
								<view v-if="form.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
							</view>  	
						</view> 
					</view>
				</view> 
				
				
				<template >
					<template v-if="list.length>0">
						<view class="list-wrap">
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="row-1"> 
									<text>{{item.user_name}} {{item.phone}}</text>
								</view>
								<view class="row-1"> 
									<text>{{item.address}}</text>
								</view>
								<view class="btn-wrap">
									<navigator :url="'/package_kucun/address/address?type=detail&id='+item.id" hover-class="none" class="btn">详情</navigator> 
									<navigator :url="'/package_kucun/address/address?type=edit&id='+item.id" hover-class="none" class="btn">编辑</navigator> 
									<!-- <view class="btn">删除</view> -->
								</view>
							</view>
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
						
						 
					</template> 
					
					<c-empty v-else></c-empty>
				</template>
			</template>
			
			<template v-if="type=='select'">
				<view class="h45">
					<view class="fix-wrap"> 
						<view class="search-area">
							<view class="search-form">
								<view class="icon iconfont f-s44">&#xe622;</view>
								<input type="text" confirm-type="search" v-model="form.keyword" class="sc-inp" @confirm="search" >
								<view v-if="form.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
							</view>  	
						</view> 
					</view>
				</view> 
				
				
				<template >
					<template v-if="list.length>0">
						<view class="list-wrap">
							<view class="item" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
								<view class="row-1"> 
									<text>{{item.user_name}} {{item.phone}}</text>
								</view>
								<view class="row-1"> 
									<text>{{item.address}}</text>
								</view> 
							</view>
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
						
						 
					</template> 
					
					<c-empty v-else></c-empty>
				</template>
			</template>
			
			
			<template v-if="type=='detail'">
				<u--form :model="form" ref="uForm" class="form-wrap m-b2">
					<u-form-item label="收货人" labelWidth="160" prop="user_name" borderBottom="true" class="u-form-item">
						<u-input v-model="form.user_name" placeholder="输入收货人" disabled disabledColor="#ffffff" border="none" />
					</u-form-item> 
					<u-form-item label="手机" labelWidth="160" prop="phone" borderBottom="true" class="u-form-item">
						<u-input type="number" v-model="form.phone" disabled disabledColor="#ffffff" placeholder="输入收货人手机" border="none" />
					</u-form-item> 					
					<u-form-item label="详细地址" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
						<u--textarea v-model="form.address" disabled disabledColor="#ffffff" placeholder="请输入详细地址" count ></u--textarea>
					</u-form-item> 
					<u-form-item label="设为默认" labelWidth="160" prop="number" borderBottom="true" class="u-form-item"> 
						<u-switch v-model="form.isdefault" disabled size="28" activeColor="#1cab1b"></u-switch>
					</u-form-item>				 
				</u--form>	 
			</template>
			 
		</view>  
		<c-footer v-if="type=='add'||type=='edit'||type=='list'||type=='select'"> 
			<view v-if="type=='add'" slot="content" class="add-btn" @click="add">提交</view>
			<view v-if="type=='edit'" slot="content" class="add-btn" @click="add">保存</view>
			<navigator v-if="type=='list'||type=='select'" slot="content" url="/package_kucun/address/address?type=add" hover-class="none" class="add-btn">添加地址</navigator>
		</c-footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				isLogin:true, 
				isIphoneX:getApp().globalData.isIphoneX, 
				systemInfo:getApp().globalData.systemInfo, 
				type:'',    
				list:[], 
				form: {
					isdefault:true,
					address:'',
					phone:'',
					user_name:'',
					keyword:'',
					page:1,
					limit:10
				},
				loadingState:{
					default:false,
					loading:false,
					completed:false
				},
				 
			}
		},
		async onLoad(params) { 
			this.type=params.type; 
			let title='';
			if(this.type=='add'){
				title='添加地址';					
			}
			if(this.type=='edit'){
				title='编辑地址';
				this.id=params.id; 
				this.meaddressone();
			}
			if(this.type=='list'||this.type=='select'){
				title='地址列表'; 
				this.getList(); 
			}
			if(this.type=='detail'){
				title='地址详情';
				this.id=params.id;
				this.meaddressone();				 
			}
			uni.setNavigationBarTitle({
				title:title
			})
			 
		},
		onShow() {
			
		}, 
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.form.page=1;
				return false
			}else{
				this.form.page++;
				this.getList(); 			
			}	 
		},
		methods: { 
			search() {
				this.list = []; 
				this.form.page=1;
				this.getList(); 
			},
			
			// 清空关键词
			clearKeyword() {
				this.form.keyword = '';
				this.list = [];
				this.form.page=1;
				this.getList(); 
			},
			
			async getList(){
				let {page,limit,keyword}=this.form;
				let res=await this.$api.user_api.memecustinfo({ 
					page,
					limit,
					search:keyword
				});  
				console.log(res)
				if(res.data.code==200){  
					this.list=this.list.concat(res.data.data);	
					if(res.data.data.length<limit){ 
						this.loadingState.completed=true;
					} 
				}
			},  
			
			async meaddressone(){
				let res=await this.$api.user_api.meaddressone({
					id:this.id
				})    
				if(res.data.code==200){ 
					this.form.user_name=res.data.data.user_name;
					this.form.phone=res.data.data.phone;
					this.form.address=res.data.data.address;
					this.form.isdefault=res.data.data.default==1?true:false;					 
				}
			},
			
			selectAddress(data){
				let item=data;
				this.$store.commit('SELECT_ADDRESS_UPDATE',item);
				uni.navigateBack({
					delta:1
				})
			},
			 
			
			async add(){
				let {user_name,isdefault,address,phone}=this.form;
				 
				if(user_name==''){
					this.$showToast({
						title:'请输入用户名',
						duration:1000,
					})
					return
				}
				if(phone==''){
					this.$showToast({
						title:'请输入收货人手机',
						duration:1000,
					})
					return
				}
				if(address==''){
					this.$showToast({
						title:'请输入详细地址',
						duration:1000,
					})
					return
				} 
				let res=await this.$api.user_api.meaddcustinfo({
					id:this.id,
					user_name,
					address,
					phone,
					default:isdefault?'on':'off', 
				})  
				console.log(res)
				if(res.data.code==200){
					this.$showToast({
						icon:'success',
						title:res.data.msg,
						duration:1000,
					})
					this.$store.commit('KUCUN_ADDRESS_UPDATE',1);
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},300)						
				}else{
					this.$showToast({
						icon:'error',
						title:res.data.msg,
						duration:1000,
					})
				}
				 
			},
			 
		},
		computed:{
			list_update(){
				return this.$store.state.kucun_address_list;
			}
		},
		watch:{
			list_update(newer,older){ 
				if(newer!=older){
					this.list=[]; 
					this.getList();
				} 
			} 
		}
	}
</script>

<style lang="less" >
	.form-wrap{
		padding:0 20rpx; 
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.slot-content{
		.hd{
			padding: 30rpx 0 10rpx;
			font-size: 30rpx;
		}
	}
	.popup-form-wrap{
		padding:20rpx;
		border-radius: 15rpx;		 
	}
	 
	.add-btn{
		height: 36px;
		line-height: 36px;
		width: 96%;
		margin: 5px auto;
		background: #1cab1b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}  
	.list-wrap{
		padding:20rpx 0;
		.item{ 
			padding:20rpx; 
			margin-bottom: 20rpx;
			background: #fff;   
			.row-1{				 
				margin-bottom: 10rpx;
				color: #333;
				font-size: 30rpx;
			}
			.btn-wrap{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding:20rpx 0 0; 
				border-top: 1rpx solid #e5e5e5;
				font-size: 30rpx;
				.btn{
					padding: 10rpx 20rpx;
					margin-left: 20rpx;
					background: #1cab1b;
					border-radius: 8rpx;
					color: #fff;
				}
			}
			 
		}
	}
</style>
